<template>
	<view class="content">
		<u-navbar
			leftIconSize="32rpx" 
			:placeholder="true" 
			:fixed="true" 
			:safeAreaInsetTop="true" 
			:autoBack="true"
			bgColor="#ec6a38"
			:border-bottom="false">
				<view slot="left">
					<u-icon size="42" name="arrow-left" color="#fff"></u-icon>
				</view>
				<view slot="center" style="display: flex;justify-content: center;color: #fff;">
					余额还款
				</view>
				<!-- #ifdef APP-PLUS -->
				<view slot="right" style="color: #fff;" @click="openPage('pages/creditcard/autoPayMoney/list')">
					还款记录
				</view>
				<!-- #endif -->
			</u-navbar>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="list">
				<view style="border-left: 8rpx solid #999; border-radius: 10rpx;background-color: #fff;"  v-for="(item,i) in list" :key="i" @click="goLink(item)">
					<view class="item">
						<view class="l">
							<image class="icon" :src="item.bank_logo" mode="aspectFill"></image>
							<view class="bankInfo">
								<view class="h3">
									{{item.name}}
								</view>
								<view class="p">
								**** **** ****	{{item.full_card_number.substring(item.full_card_number.length-4)}}
								</view>
							</view>
						</view>
						<view class="r " :class="item.type==1?'active':''" >
							<template v-if="item.plan_status==0">
								未制定
							</template>
							<template v-if="item.plan_status==1">
								<text style="color: #76D358;">已制定</text>
							</template>
							<template v-if="item.plan_status==2">
								<text style="color: #F1B53E;">进行中</text>
							</template>
							<template v-if="item.plan_status==3">
								<text style="color: #007AFF;">已完成</text>
							</template>
							<template v-if="item.plan_status==4">
								<text style="color: #FF570A;">已取消</text>
							</template>
							<template v-if="item.plan_status==5">
								<text style="color: #E10A07;">已失败</text>
							</template>
						</view>
					</view>
					<view style="padding: 20rpx;" v-if="item.plan_status==5">
						<text style="color: #E10A07;">失败原因:{{item.plan_log_message}}</text>
					</view>
				</view>
			</view>
		</mescroll-body>

	</view>
</template>

<script>
	import imagesUrl from '@/common/images.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {userInfoByToken, centerConfig } from '@/common/http.api.js'
	import { bankcard } from '@/common/bankcard.api.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				pagination: {
					current: 1,
					page: 1,
					pageSize: 0,
					total: 0,
					type: '02'
				},
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				downOption:{
					
				},
				list: [
				],
			}
		},
		onShow() {
			uni.hideLoading()
			this.images = imagesUrl.my
			let that = this;
		
			uni.$on('updateUserInfo', function(data) {
				userInfoByToken({}).then(res => {
					that.user = res
					uni.setStorageSync('user_info', JSON.stringify(res))
				})
				centerConfig({}).then(res => {
					that.navList = res
				})
			})
		},
		onLoad() {
		
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			console.log('下拉加载')
		},
		created() {

		},
		methods: {
			openPage(path, params = {}) {
				this.$u.route({
					url: path,
					params
				})
			},
			getList() {
				let that = this;
				let params = {}
				params.page = that.pagination.current;
				params.type = that.pagination.type;
				params.page_size = 20
				bankcard(params).then(res => {
					if (!res.list) {
						res.list = []
					}
					if(res.list.length<1){
						uni.$u.toast('没有卡片，去添加')
						uni.navigateTo({
							url:'/pages/bankcard/creditCard?source=repayment',
						})
					}
					if (!res.pagination) {
						res.pagination = {}
						res.pagination.total = 0
					}
					that.mescroll.endByPage(res.list.length, res.pagination.total)
					that.pagination.page = that.pagination.current
					if (that.pagination.current * 1 == 1) {
						that.list = res.list
					} else {
						that.list = [...that.list, ...res.list]
					}
					res.pagination.type = that.pagination.type;
					that.pagination = res.pagination;
					that.pagination.current = that.pagination.current * 1 + 1
					that.pagination.page = that.pagination.current * 1 + 1
				})
			},

			upCallback() {
				this.getList()
			},
			downCallback() {
				this.pagination.page = 1;
				this.pagination.current = 1;
				this.mescroll.resetUpScroll();
			},
			showCalendar() {
				this.showCalendarStatus = true
			},
			goLink(item) {
				console.log(item)
				if (item.plan_status == 0 || item.plan_status == 5 || item.plan_status == 4 || item.plan_status == 3) {
					uni.navigateTo({
						url: '/pages/creditcard/autoPayMoney/add?bankcard_id='+item.id,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else{
					uni.navigateTo({
						url: '/pages/creditcard/autoPayMoney/info?deCode=' + item.plan_id,
						success: res => {},
						fail: () => {},
						complete: () => {}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f4f5f7;
	}
</style>
<style scoped lang="scss">
	.list {
		padding: 0 30rpx;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx 0;
		

		.icon {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			margin-right: 20rpx;
		}

		.l {
			display: flex;
			align-items: center;

			.h3 {
				font-size: 28rpx;
				margin-bottom: 20rpx;
				font-weight: bold;
			}

			.p {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.r {
			font-size: 28rpx;
			color: #666;

			&.active {
				color: #ec6a38;
			}
		}
	}
</style>
